<template>
  <el-dialog
    title="选择用户"
    :visible.sync="dialogVisible"
    :before-close="handleBeforeClose"
    :close-on-click-modal="false"
    :append-to-body="true"
    class="vc-dialog-table append-to-body select-user-dialog"
    width="780px">
    <div class="vc-page">
      <!-- 查询条件 -->
      <div class="vc-search">
        <el-row>
          <el-col :span="8">
            <span>用户名</span>
            <el-input v-model="queryData.username" placeholder="请输入" class="vc-search-input" size="small" clearable></el-input>
          </el-col>

          <el-col :span="8">
            <span>昵称</span>
            <el-input v-model="queryData.nickname" placeholder="请输入" class="vc-search-input" size="small" clearable></el-input>
          </el-col>

          <el-col :span="8" class="vc-search-btn">
            <el-button @click="search" type="primary" size="small">查询</el-button>
            <el-button @click="reset" size="small">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 列表展示 -->
      <div class="vc-table">
        <el-table
          ref="selectUserTable"
          :data="userTableData"
          :empty-text="emptyText"
          @current-change="handleCurrentRow"
          highlight-current-row
          size="small"
          style="width: 100%"
          tooltip-effect="light">
          <el-table-column
            label=""
            align="center"
            width="50">
            <template slot-scope="scope">
              <el-radio
                v-model="radio"
                :label="scope.row.id"
                size="small"
                @change.native="handleCurrentRow(scope.row)">
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type='index'
            :index="indexMethod"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            label="用户名"
            prop="username"
            align="left"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            label="昵称"
            prop="nickname"
            align="left"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            label="用户类型"
            prop="type"
            align="left"
            :formatter="formatType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            label="用户状态"
            prop="state"
            align="left"
            :formatter="formatState"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            label="用户性质"
            prop="nature"
            align="left"
            :formatter="formatNature"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>

        <el-pagination
          :current-page="currentPage"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next">
        </el-pagination>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" :disabled="disabled" @click="sure">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'selectUser',
  props: ['dialogVisible', 'userId'],
  data () {
    return {
      queryData: {
        username: '',
        nickname: ''
      },
      searchData: {},
      emptyText: this.GLOBAL.QUERY.LOADING_TEXT,
      pageSize: 7,
      currentPage: 1,
      total: 0,
      userTableData: [],
      currentRow: null,
      disabled: true,
      radio: ''
    }
  },
  watch: {
    dialogVisible (val) {
      val && this.findUserUnrelatedPersonnel()
    },
    currentRow (val) {
      val && (this.disabled = false)
      !val && (this.disabled = true)
    }
  },
  created () {
    this.findUserUnrelatedPersonnel()
  },
  methods: {
    /**
     * 加载列表数据
     */
    findUserUnrelatedPersonnel (pageNum = this.currentPage, pageSize = this.pageSize, entity = this.searchData) {
      this.$api.findUserUnrelatedPersonnel({
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          params: entity
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData()
          return
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--
          this.findUserUnrelatedPersonnel()
          return
        }
        this.userTableData = res.data.records
        this.total = res.data.total
        this.currentPage = res.data.current
        this.setDefaultSelected()
      }).catch(() => {
        this.emptyTableData()
      })
    },
    /**
     * 设置默认选中
     */
    setDefaultSelected () {
      this.currentRow = null
      this.radio = ''
      if (!this.userId) {
        return
      }
      this.userTableData.forEach(item => {
        if (item.id == this.userId) {
          this.$refs.selectUserTable && this.$refs.selectUserTable.setCurrentRow(item)
          this.handleCurrentRow(item)
          return false
        }
      })
    },
    /**
     * 清空表格数据
     */
    emptyTableData () {
      this.userTableData = []
      this.total = 0
      this.currentPage = 1
      this.emptyText = this.GLOBAL.QUERY.EMPTY_TEXT
      this.currentRow = null
      this.radio = ''
    },
    /**
     * 格式化列表数据
     */
    indexMethod (index) {
      return this.GLOBAL.formatter.formatIndex(index, this.currentPage, this.pageSize)
    },
    formatType (row) {
      let map = this.$store.state.dic.mapFormat['yhlx']
      return map && row.type ? map[row.type] : ''
    },
    formatState (row) {
      let map = this.$store.state.dic.mapFormat['yhzt']
      return map && row.state ? map[row.state] : ''
    },
    formatNature (row) {
      let map = this.$store.state.dic.mapFormat['yhxz']
      return map && row.nature ? map[row.nature] : ''
    },
    /**
     * 点击页数
     */
    handleCurrentChange (val) {
      this.findUserUnrelatedPersonnel(val)
    },
    /**
     * 查询
     */
    search () {
      this.searchData = this.GLOBAL.filter.filterSpace(this.queryData)
      this.currentPage = 1
      this.findUserUnrelatedPersonnel()
    },
    /**
     * 重置
     */
    reset () {
      this.queryData = this.GLOBAL.object.clearValOfObj(this.queryData)
      this.search()
    },
    /**
     * 某一行选中事件
     */
    handleCurrentRow (val) {
      if (!val) return
      this.currentRow = val
      this.radio = val.id
    },
    /**
     * '确认'按钮点击事件
     */
    sure () {
      this.$emit('close', this.currentRow)
    },
    /**
     * 弹出框'关闭'按钮点击事件
     */
    handleBeforeClose () {
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="less">
.select-user-dialog {
  .vc-search {
    padding-left: 0;
    .el-row > .el-col {
      &:not(.vc-search-btn) {
        justify-content: flex-start;
      }
      &.vc-search-btn {
        justify-content: flex-end;
      }
      & > span {
        width: 55px;
      }
      & > .vc-search-input {
        width: calc(100% - 70px);
      }
    }
  }
  .el-table__body-wrapper {
    height: 288px;
    overflow-y: auto !important;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .el-radio__label {
    display: none;
  }
}
</style>
